<template>
<p>{{ msg }}</p>
<button v-on:click="increment">您点击了{{ count }}次</button>
</template>
<script setup>
import { ref } from 'vue';

// 通过ref函数定义数据
const msg = ref('Hello Vue')
// 通过ref函数定义的常量,其值不能直接修改
// msg = 'Hello Composition'   // 报错

// 如果想要修改数据,只能修改ref中的值,通过value属性可以访问ref函数中的数据
msg.value = 'Hello Compostion'

const count = ref(0)

function increment(){
    // 当点击按钮之后,其count的值自增1
    // count++ // 报错
    count.value++
}

</script>